<template>
    <div class="write-container">
        <h1 id="inActiveTime" style="display: none;" />
        <div v-if="writeStatus===0">
            <project-form
                v-if="projectConfig.projectId"
                :key="projectConfig.projectId"
                :project-config="projectConfig"
                @submit="submitForm"
            />
        </div>
        <div v-if="writeStatus===1" class="title-icon-view">
            <div class="icon-view">
                <i class="el-icon-check success-icon" />
            </div>
          <div style="text-align: center; padding: 10px;">
              <span v-if="userProjectSetting.submitPromptText">{{ userProjectSetting.submitPromptText }}</span>
              <span v-else>您已完成本次填写，感谢您的帮助与支持!</span>
          </div>
            <div style="text-align: center; padding: 10px;" v-if="userProjectSetting.submitPromptImg">
                <el-image
                    :src="userProjectSetting.submitPromptImg"
                    fit="cover"
                />
            </div>
            <el-button v-if="userProjectSetting.resultPublic" type="primary" @click="openPublicResultHandle">
                查看数据
            </el-button>
        </div>
    </div>


</template>
<script>
import ProjectForm from '../preview/ProjectForm'
import loadWXJs from '@/utils/loadWxSdk'
import {getQueryString} from '@/utils/index'
import {queryPublicFormProjectSettingResByProjectId, savePublicFormProjectResult } from '@/api/form/formProjectPublic'

const uaParser = require('ua-parser-js')
const ua = uaParser(navigator.userAgent)

require('@/utils/form/utils/ut')
export default {
    name: 'WriteView',
    components: {
        ProjectForm
    },
    props: {},
    data() {
        return {
            inActiveTime: 0,
            projectConfig: {
                projectId: '',
                preview: false,
                showBtns: true
            },
            writeStatus: 3,
            writeNotStartPrompt: '',
            userProjectSetting: {
                submitPromptText: ''
            },
          formProjectRes: {}
        }
    },
    metaInfo: {
        meta: [
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
            }
        ]
    },
    async created() {
        this.projectConfig.projectId = this.$route.query.key || this.$route.params.key
        this.queryProjectSetting()
    },
    mounted() {

    },
  methods: {
      openTips(message) {
          this.$alert(message, {
            dangerouslyUseHTMLString: true,
            closeOnPressEscape:false,
            showCancelButton:false,
            showConfirmButton:false,
            lockScroll:false,
            showClose:false
          });
        },

        queryProjectSetting() {
          let projectId = this.projectConfig.projectId
          queryPublicFormProjectSettingResByProjectId({"projectId":projectId}).then(res => {
              if (res&&res.errorCode === 0) {
                    let resData = res.data;
                    let writeShowStatus = resData.writeShowStatus
                    this.userProjectSetting = resData.formProjectSettingRes
                    this.formProjectRes = resData.formProjectRes
                    this.writeStatus = 0
                    document.title = this.formProjectRes.projectName
                    if (writeShowStatus!=='YES'){
                      let showOpenTipsMessage = resData.writeShowMessage;
                      let message= '<strong>'+showOpenTipsMessage+'</strong>'
                      this.openTips(message)
                    }
                }
            })
        },
        openPublicResultHandle() {
            let key = this.projectConfig.projectId
            this.$router.replace({path: '/project/public/result', query: {key}})
        },
        submitForm(data) {
            // 完成时间
            let inActiveTime = document.getElementById('inActiveTime').innerText
            let saveReq = {
              'completeTime': inActiveTime,
              'projectId': this.projectConfig.projectId,
              'submitOs': ua.os.name,
              'submitBrowser': ua.browser.name,
              'submitUa': ua,
              'originalData': data.formModel,
              'processData': data.labelFormModel
            }
            savePublicFormProjectResult(saveReq).then(() => {
                this.writeStatus = 1
                if (this.userProjectSetting.submitJumpUrl) {
                    setTimeout(() => {
                        window.location.replace(this.userProjectSetting.submitJumpUrl)
                    }, 1000)
                }

            })
        }
    }
}
</script>

<style lang="scss" scoped>
.write-container {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.title-icon-view {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.icon-view {
  width: 59px;
  height: 59px;
  border-radius: 100px;
  background-color: #0076ff;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.success-icon {
  text-align: center;
  color: white;
  font-size: 30px;
}
</style>
